<template>
	<view class="user-container">
		<!-- 用户信息头部 -->
		<view class="user-header">
			<JNavBar :bgImage="false"></JNavBar>
			<view class="user-info">
				<view class="avatar-section" @click="editAvatar">
					<image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
				</view>
				<view class="user-details">
					<view class="user-name">{{ userInfo.nickname || '无' }}</view>
					<!-- <view class="user-badges">
						<view class="badge verified">
							<text class="iconfont icon-check"></text>
							<text>V已认证</text>
						</view>
						<view class="badge assistant">
							<text class="iconfont icon-check"></text>
							<text>门店助手</text>
						</view>
					</view> -->
					<view class="user-info-details">
						<!-- <text>ID: {{ userInfo.id || '942814' }}</text> -->
						<text>TEL: {{ userInfo.phone || '17631603978' }}</text>
					</view>
				</view>
				<view class="header-actions">
					<view class="settings-btn" @click="goSettings">
						<text class="iconfont icon-setting"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单状态区域 -->

		<view class="order-section">
			<view class="order-header">
				<text class="order-title">我的订单</text>
				<view class="order-all-link" @click="goToOrders('all')">
					<text>全部订单</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			<view class="order-items">
				<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goToOrders(item.type)">
					<view class="order-icon">
						<image :src="item.icon" mode="aspectFit"></image>
					</view>
					<text class="order-label">{{ item.label }}</text>
				</view>
			</view>
		</view>

		<!-- 服务区域 -->
		<view class="service-section">
			<view class="service-item" v-for="(item, index) in serviceList" :key="index" :class="item.className" @click="goToService(item.type)">
				<view class="service-icon" :class="item.iconClass">
					<text class="iconfont" :class="item.icon"></text>
				</view>
				<text class="service-label">{{ item.label }}</text>
			</view>
		</view>

		<!-- 联系客服弹框 -->
		<JCustomerService :visible="showServiceModal" :phone-number="customerServicePhone" :customer-service-config="serviceConfig" @close="handleServiceModalClose" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				avatar: '',
				nickname: '',
				phone: '',
				id: '',
				isLogin: false
			},
			switchActive: true,
			showServiceModal: false,
			customerServicePhone: '400-123-4567',
			serviceConfig: {
				corpId: 'your_corp_id', // 需要替换为实际的企业ID
				url: 'https://work.weixin.qq.com/kfid/kfxxxxxxxxxxxxx' // 需要替换为实际的客服链接
			},
			orderList: [
				{
					type: 'pending',
					label: '待付款',
					icon: '/static/images/order/user-01.png'
				},
				{
					type: 'shipping',
					label: '待收货',
					icon: '/static/images/order/user-02.png'
				},
				{
					type: 'aftersale',
					label: '售后',
					icon: '/static/images/order/user-03.png'
				},
				{
					type: 'completed',
					label: '已完成',
					icon: '/static/images/order/user-04.png'
				}
			],
			serviceList: [
				{
					label: '零担专区',
					path: 'LTLZone/LTLZone'
				},
				{
					label: '关注店铺'
				},
				{
					label: '联系客服',
					
				},
				{
					label: '切换店铺'
				},
				{
					label: '城市合伙仓'
				},
				{
					label: '投诉与建议'
				}
			]
		};
	},
	onLoad() {
		this.loadUserInfo();
	},
	methods: {
		// 加载用户信息
		loadUserInfo() {
			// 这里可以从本地存储或API获取用户信息
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.userInfo = userInfo;
			}
		},

		// 编辑头像
		editAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.userInfo.avatar = res.tempFilePaths[0];
					// 这里可以上传到服务器
				}
			});
		},

		// 去设置页面
		goSettings() {
			uni.navigateTo({
				url: '/pages/settings/settings'
			});
		},

		// 去订单页面
		goToOrders(type) {
			uni.navigateTo({
				url: `/pages/orders/orders?type=${type}`
			});
		},

		// 统一的服务跳转方法
		goToService(type) {
			// 如果是联系客服，显示弹框
			if (type === 'customerService') {
				this.showServiceModal = true;
				return;
			}

			const serviceRoutes = {
				followedStores: '/pages/followed-stores/followed-stores',
				switchStore: '/pages/switch-store/switch-store',
				warehouse: '/pages/warehouse/warehouse',
				feedback: '/pages/feedback/feedback'
			};

			const route = serviceRoutes[type];
			if (route) {
				uni.navigateTo({
					url: route
				});
			} else {
				console.warn(`未找到服务类型 ${type} 对应的路由`);
			}
		},

		// 关闭客服弹框
		handleServiceModalClose() {
			this.showServiceModal = false;
		}
	}
};
</script>

<style lang="less">
.user-container {
	background-color: #f5f5f5;
	.min-height-100vh();
}

// 用户信息头部
.user-header {
	padding: 20rpx 20rpx 20rpx;
	position: relative;
	box-shadow: 0 8rpx 32rpx rgba(36, 110, 249, 0.1), 0 2rpx 8rpx rgba(36, 110, 249, 0.05);
	overflow: hidden;
	background: linear-gradient(180deg, rgba(36, 110, 249, 0.8) 70%, rgba(36, 110, 249, 0.5) 100%);

	.user-info {
		display: flex;
		align-items: flex-start;
		position: relative;
		z-index: 3;

		.avatar-section {
			margin-right: 30rpx;
			transition: transform 0.3s ease;

			&:active {
				transform: scale(0.95);
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(255, 255, 255, 0.4);
				background-color: rgba(255, 255, 255, 0.1);
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1), inset 0 2rpx 8rpx rgba(255, 255, 255, 0.2);
			}
		}

		.user-details {
			flex: 1;
			padding-top: 10rpx;

			.user-name {
				font-size: 40rpx;
				font-weight: 600;
				color: #fff;
				margin-bottom: 20rpx;
			}

			.user-badges {
				display: flex;
				gap: 20rpx;
				margin-bottom: 20rpx;

				.badge {
					display: flex;
					align-items: center;
					gap: 8rpx;
					padding: 10rpx 18rpx;
					border-radius: 24rpx;
					font-size: 24rpx;
					backdrop-filter: blur(10rpx);
					transition: all 0.3s ease;

					&.verified {
						background-color: rgba(76, 175, 80, 0.25);
						color: #4caf50;
						border: 1rpx solid rgba(76, 175, 80, 0.4);
						box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.2);
					}

					&.assistant {
						background-color: rgba(76, 175, 80, 0.25);
						color: #4caf50;
						border: 1rpx solid rgba(76, 175, 80, 0.4);
						box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.2);
					}

					&:hover {
						transform: translateY(-2rpx);
						box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
					}

					.iconfont {
						font-size: 20rpx;
					}
				}
			}

			.user-info-details {
				display: flex;
				flex-direction: column;
				gap: 8rpx;

				text {
					font-size: 26rpx;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}

		.header-actions {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;

			.settings-btn {
				// width: 60rpx;
				// height: 60rpx;
				// background-color: rgba(255, 255, 255, 0.25);
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				backdrop-filter: blur(10rpx);
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

				&:active {
					background-color: rgba(255, 255, 255, 0.35);
					transform: scale(0.95);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
				}

				.iconfont {
					font-size: 40rpx;
					color: #fff;
				}
			}
		}
	}
}

// 订单状态区域
.order-section {
	background-color: #fff;
	margin: 20rpx 20rpx;
	border-radius: 16rpx;

	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx 20rpx;
		.order-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}

		.order-all-link {
			display: flex;
			align-items: center;
			transition: all 0.3s ease;
			&:active {
				// background-color: #e9ecef;
				transform: scale(0.98);
			}

			text {
				font-size: 26rpx;
				color: #333;
			}

			.iconfont {
				font-size: 26rpx;
				color: #333;
			}
		}
	}

	.order-items {
		display: flex;
		justify-content: space-around;
		padding: 0 20rpx 20rpx;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}

		.order-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.order-label {
			font-size: 26rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

// 提货单区域
.pickup-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;

	&:active {
		background-color: #f8f9fa;
		transform: scale(0.98);
	}

	.pickup-icon {
		width: 50rpx;
		height: 50rpx;
		background-color: #246ef9;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			font-size: 24rpx;
			color: #fff;
		}
	}

	.pickup-text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.pickup-arrow {
		.iconfont {
			font-size: 24rpx;
			color: #ccc;
		}
	}
}

// 个人资产区域
.assets-section {
	background-color: #fff;
	margin: 0 30rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

	.asset-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}

		.asset-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&.coupon {
				background-color: #ff6b6b;
			}

			&.envelope {
				background-color: #ff6b6b;
			}

			&.grains {
				background-color: #ffa726;
			}

			&.bag {
				background-color: #66bb6a;
			}

			.iconfont {
				font-size: 28rpx;
				color: #fff;
			}
		}

		.asset-label {
			font-size: 26rpx;
			color: #333;
			font-weight: 500;
			text-align: center;
		}

		.asset-sublabel {
			font-size: 22rpx;
			color: #999;
			text-align: center;
		}
	}
}

// 服务区域
.service-section {
	background-color: #fff;
	margin: 0 20rpx;
	border-radius: 16rpx;
	padding: 30rpx 20rpx;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

	.service-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16rpx;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95);
		}

		&.feedback {
			grid-column: 1 / 3;
		}

		.service-icon {
			width: 50rpx;
			height: 50rpx;
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #246ef9;

			.iconfont {
				font-size: 24rpx;
				color: #fff;
			}
		}

		.service-label {
			font-size: 24rpx;
			color: #333;
			font-weight: 500;
			text-align: center;
		}
	}
}
</style>
